<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Leaflet 加载 ArcGIS Online 地图</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>

    <script>
        // 创建地图实例，使用默认的EPSG:3857 CRS
        var map = L.map('map', {
            center: [39.9042, 116.4074], // 地图中心点 (北京)
            zoom: 4 // 适当的缩放级别
        });

        console.log('Leaflet map initialized:', map);

        // 加载 SuperMap China100 底图 - EPSG:3857
        var china100Layer = L.tileLayer('https://iserver.supermap.io/iserver/services/map-China100/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}', {
            attribution: '&copy; <a href="https://www.supermap.com/">SuperMap</a>',
            errorTileUrl: 'https://tiles.wmflabs.org/bw-mapnik/0/0/0.png',
            crossOrigin: true,
            maxZoom: 18,
            minZoom: 0,
            tileSize: 256
        });

        // 添加错误处理
        china100Layer.on('tileerror', function(e) {
            console.error('瓦片加载错误:', e);
            console.log('请求的瓦片URL:', e.tile.src);
        });

        // 添加加载成功处理
        china100Layer.on('tileload', function(e) {
            console.log('瓦片加载成功:', e.tile.src);
        });

        china100Layer.addTo(map);

        console.log('SuperMap China100 layer added:', china100Layer);

    </script>
</body>
</html> 